<template>
    <div class="echartsItem" ref="screen" style="width: 100%;height: 350px;" id="test">
    </div>
</template>

<script setup lang='ts'>

import * as echarts from 'echarts'
import { onMounted, ref, watch } from 'vue';
// 接收传过来的配置项
const props = defineProps(['options'])
let screen = ref()
// 定义函数用于重新渲染图表

watch(() => props.options, (newOptions) => {
    // console.log('最新你的', newOptions);

    // myChart.setOption(newVal)
    renderEcharts(newOptions)

})

const renderEcharts = (options) => {
    // if (condition) {

    // }
    let myChart = echarts.getInstanceByDom(screen.value)
    if (!myChart) {
        myChart = echarts.init(screen.value)
    }

    // console.log('进行渲染的', options);
    myChart.clear()
    // myChart.dispose()

    myChart.setOption(options)
}
onMounted(() => {
    // const 
    // let myChart = echarts.init(screen.value)
    // myChart.setOption(props.options)
    renderEcharts(props.options)
})
</script>

<style lang="less" scoped></style>